<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>Accordion</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="stylesheets/normalize.css">
    <link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>

<contacts-page>
    <header>
        <h1 class="title">联系人</h1>
    </header>
    <main>
        <ul class="group-list">
            <li class="flag">基友
                <ul class="friend-list">
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">木子李</div>
                            <div class="signature">[iPhone在线] 哎哟，不错，有点儿意思，可以很强势！</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">蒂姆·库克</div>
                            <div class="signature">[iPhone在线] 生活不是要你站在边线围观，这个世界需要你参与进来</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">李达康</div>
                            <div class="signature">[电脑在线] 现在严重的问题，不是教育群众，而是教育干部。</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="flag">同事
                <ul class="friend-list">
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">木子李</div>
                            <div class="signature">[4G在线] 哎哟，不错，有点儿意思，可以很强势！</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">蒂姆·库克</div>
                            <div class="signature">[iPhone在线] 生活不是要你站在边线围观，这个世界需要你参与进来</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">李达康</div>
                            <div class="signature">[WIFI] 现在严重的问题，不是教育群众，而是教育干部。</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="flag">朋友
                <ul class="friend-list">
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">木子李</div>
                            <div class="signature">[电脑在线] 哎哟，不错，有点儿意思，可以很强势！</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">蒂姆·库克</div>
                            <div class="signature">[电脑在线] 生活不是要你站在边线围观，这个世界需要你参与进来</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">李达康</div>
                            <div class="signature">[电脑在线] 现在严重的问题，不是教育群众，而是教育干部。</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="flag">家人
                <ul class="friend-list">
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">木子李</div>
                            <div class="signature">[iPhone在线] 哎哟，不错，有点儿意思，可以很强势！</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">蒂姆·库克</div>
                            <div class="signature">[手机在线] 生活不是要你站在边线围观，这个世界需要你参与进来</div>
                        </div>
                    </li>
                    <li>
                        <div class="head-portrait"></div>
                        <div class="infos">
                            <div class="nike-name">李达康</div>
                            <div class="signature">[手机在线] 今天天不错！</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>陌生人</li>
            <li>黑名单</li>
        </ul>
    </main>
</contacts-page>

</body>
</html>







